<!--指向用户中心的链接-->
<script setup>
import {setupMapState} from "@/assets/js/vuexUtils";
import ClickCopy from "@/components/common/click-copy.vue";
import {routeNames} from "@/router";
import {onMounted, ref, toRefs, watch} from "vue";
import NgaRouterLink from "@/components/common/link/NgaRouterLink.vue";
import {useStore} from "vuex";
import {ElementUtils} from "@/assets/js/ElementUtils";

const props = defineProps({
  userId: Number,
  username: String,
  bracket: Boolean,
  placement: {default: 'top'},
  disableTooltip: Boolean,
})

const {currentUid} = setupMapState("Account", ['currentUid']);

const {userId, username} = toRefs(props)
const {center, center2} = routeNames.user


const store = useStore();
const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})

const addBlock = (user) => store.dispatch("Block/addUser", user)
const delBlock = (user) => store.dispatch("Block/delUser", user)
const getBlock = () => store.dispatch("Block/getBlockData")

// 当前用户是否已被屏蔽
const blocked = ref(false);
const loading = ref(false);
// 请求添加或移除屏蔽
const beforeChange = () => {
  const user = userId.value || username.value
  loading.value = true;
  if (blocked.value) {
    return delBlock(user).then(res => {
      ElementUtils.notice({message: res})
      return res;
    }).finally(() => loading.value = false)
  }
  return addBlock(user).then(res => {
    ElementUtils.notice({message: res})
    return res;
  }).finally(() => loading.value = false);
}

const getRoute = (uid, uname) => {
  const name = uid ? center : center2
  const params = uid ? {id: uid} : {name: uname}
  return {name, params, query: {account: currentUid.value}}
}

// 初始化，判断当前用户是否被屏蔽
const init = async (userId, username) => {
  const data = await getBlock();
  const {users, keywords} = data
  const user = users.filter(i => i.startsWith(userId + '/') || i.endsWith('/' + username))[0]
  blocked.value = !!user;
}


onMounted(() => {
  init(userId.value, username.value);
})

watch(userId, (nv) => init(nv))
watch(username, (nv) => init(undefined, nv))

</script>

<template>
  <el-tooltip v-if="userId || username" :disabled="disableTooltip" :placement="placement" effect="light">
    <span v-if="userId===0 ">
      <el-tag effect="dark" size="small" type="danger">匿名</el-tag>
      {{ username }}</span>
    <nga-router-link :bracket="bracket" :route="getRoute(userId,username)">
      <slot></slot>
    </nga-router-link>
    <template #content>
      <div>
        <el-link v-if="userId" :href="'https://bbs.nga.cn/nuke.php?func=ucp&uid='+userId" target="_blank" type="primary">官方地址</el-link>
        <el-link v-else :href="'https://bbs.nga.cn/nuke.php?func=ucp&__inchst=UTF8&username='+username" target="_blank" type="primary">官方地址</el-link>
      </div>
      <div>
        <el-divider content-position="left">操作</el-divider>
        <!--      屏蔽-->
        <el-switch v-model="blocked" :before-change="beforeChange" :loading="loading" active-color="red" active-text="屏蔽" size="small"/>
        &nbsp;
        <el-link type="primary" @click="showDialog('pm_new',[userId])">私信</el-link>
        &nbsp;
        <el-link type="primary" @click="showDialog('item_use',{userId})">道具</el-link>
      </div>
      <div v-if="userId">
        <el-divider content-position="left">复制</el-divider>
        <div>
          <click-copy v-if="userId" :text="userId">
            <el-link type="primary">UID</el-link>
          </click-copy>
          &nbsp;
          <click-copy v-if="userId" :text="(username && !/^\d+$/.exec(username))?`[@${username}]`:`[@${userId}]`">
            <el-link type="primary">@代码</el-link>
          </click-copy>
          &nbsp;
          <click-copy v-if="userId && username" :text="`[uid=${userId}]${username}[/uid]`">
            <el-link type="primary">UID代码</el-link>
          </click-copy>
        </div>
      </div>
      <!--私信-->
    </template>
  </el-tooltip>
</template>

<style scoped>
</style>